import React from 'react';
import {useSelector} from 'react-redux'
import {RootState} from "../../redux/store/store";
import {Row,Col,Spin,Affix} from 'antd'
import ProductList from "../../components/ProductList/ProductList";
import './pagebuycar.css'
import MyHeaderFunc from "../../components/MyHeader/MyHeaderFunc";
import {PaymentCart} from "../../components/PaymentCart/PaymentCart"
function PageBuycar() {
    const isloading=useSelector((state:RootState)=>state.buycar.isloading)
    const error=useSelector((state:RootState)=>state.buycar.error)
    const buycarproducts=useSelector((state:RootState)=>state.buycar.buycarproducts)
        if(isloading) {
            return (<Spin style={{width:"100%",height:"100vh"}}></Spin>)
        }else if(error){
            return (<h1>网络错误: {error}</h1>)
        }
        return(
            <div className="buycar">
                <MyHeaderFunc></MyHeaderFunc>
                <Row>
                    <Col span={14} className="buycarlist">
                            {
                                buycarproducts.length === 0 ?
                                    <h1 className="sum">购物车是空的，快去添加商品吧！</h1>
                                    :
                                    <ProductList productlist={buycarproducts}></ProductList>
                            }
                    </Col>
                    <Col span={10}>
                        <Affix offsetTop={0}>
                            <PaymentCart
                                originalPrice={
                                    buycarproducts.reduce((sum,item)=>{
                                        return sum+item.originalPrice
                                    },0)
                                }
                                Price={
                                    buycarproducts.reduce((sum,item)=>{
                                        return sum+item.touristRoute.price
                                    },0)
                                }
                            ></PaymentCart>
                        </Affix>
                    </Col>
                </Row>
            </div>
        )
}
export default PageBuycar